<template>
  <div>
    <div class="writeSelect" :style="selectStyle">
      <div class="selectShow" :style="isShow ? 'border-color: #FF8A00;' : '', canOpen ? '' : 'background: #ddd; cursor: default;'" @click="handleShowOptions">
        <span :style="selectName == plhdText ? 'color: #C7C7C7;' : ''">{{ selectName }}</span>
        <img :style="isShow ? 'transform: rotate(-180deg);' : 'transform: rotate(0deg);'" src="../assets/login/icon_arrow_1.png" alt="">
      </div>
      <div class="optionList" v-show="isShow">
        <div class="options" v-for="(item, index) in showList" :key="index" @click="handleChoSelectOption(item)">{{ item.name }}</div>
      </div>
    </div>
  </div>  
</template>

<script>
export default {
  name: 'SelectOption',
  props: {
    modelName: String,
    plhdText: String,
    showList: Array,
    selectStyle: String,
    showOptions: Boolean,
    isCanOpenOption: {
      type: Boolean,
      default: true
    },
    vModel: Number
  },
  mounted() {
    this.selectName = this.plhdText
    this.isShow = this.showOptions
    this.canOpen = this.isCanOpenOption
  },
  data() {
    return {
      selectName: '',
      isShow: false,
      canOpen: true
    }
  },
  watch: {
    showOptions(boolean) {
      this.isShow = boolean
    },
    isCanOpenOption(boolean) {
      this.canOpen = boolean
    },
    vModel(number) {
      if (number !== 0) {
        this.selectName = number + ''
      } else {
        this.selectName = this.plhdText
      }
    }

  },
  methods: {
    // 展开option
    handleShowOptions() {
      if (this.canOpen) {
        this.isShow = !this.isShow
        const obj = {
          show: this.isShow,
          name: this.modelName
        }
        this.$emit('handleOpenOptionList', obj)
      }
    },
    handleChoSelectOption(data) {
      this.isShow = false
      this.selectName = data.name
      const sendObj = {
        data,
        modelName: this.modelName
      }
      this.$emit('handleChoOptionValue', sendObj)
    },
  }
}
</script>

<style lang="less" scoped>
  @defaultColor: #1C2227;
  @importColor: #FF8A00;
  .writeSelect {
    position: relative;
    .selectShow {
      height: 38px;
      width: 100%;
      line-height: 38px;
      padding-left: 15px;
      padding-right: 8px;
      border: 1px solid #E1E4EB;
      border-radius: 2px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 14px;
        color: @defaultColor;
        font-family: MicrosoftYaHei;
      }
      img {
        width: 12px;
        height: 12px;
        transition: transform 0.1s linear;
        transform: rotate(0deg);
      }
    }
    .selectShow:hover {
      border-color: #C0C4CC;
      cursor: pointer;
    }
    .optionList {
      width: 100%;
      position: absolute;
      top: 42px;
      left: 0;
      z-index: 10;
      background: #fff;
      box-shadow: 0px 0px 5px 1px #E1E4EB;
      max-height: 200px;
      overflow-y: auto;
      .options {
        width: 100%;
        height: 38px;
        line-height: 38px;
        padding-left: 15px;
        cursor: pointer;
      }
      .options:hover {
        background: @importColor;
        border-color: @importColor;
        color: #fff;
      }
      .options:last-child {
        border-radius: 2px;
      }
    }
  }
</style>